<template>
    <img src="../../public/images/see-more.PNG" style="width: 150px;height: auto;float: right;margin:30px 100px 10px 0;" />
    <div class="grid-container">  
      <el-card style="max-width: 270px">
       <img src="../../public/images/juben.png" style="width: 100%;height: 270px;"/>
        <template #footer>剧本名称</template>
      </el-card>

      <el-card style="max-width: 270px">
       <img src="../../public/images/juben.png" style="width: 100%;height: 270px;"/>
        <template #footer>剧本名称</template>
      </el-card>  
      
      <el-card style="max-width: 270px">
       <img src="../../public/images/juben.png" style="width: 100%;height: 270px;"/>
<template #footer>剧本名称</template>
      </el-card>
      
      <el-card style="max-width: 270px">
       <img src="../../public/images/juben.png" style="width: 100%;height: 270px;"/>
<template #footer>剧本名称</template>
      </el-card>
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'GridLayout'  
  }  
  </script>  
    
  <style scoped>  
  .grid-container {  
    display: grid;  
    grid-template-columns: repeat(4, 1fr); /* 4列，每列等宽 */  
    grid-template-rows: repeat(4, 370px); /* 1行，固定高度为100px */  
    gap: 50px; /* 网格间距 */  
    padding: 10px;  
    width: 95%; /* 容器宽度，根据需要调整 */
    display: flex;  
    justify-content: center;
    margin-top: 30px;  
  }  
    
  .grid-item {  
    background-color: #ffffff; /* 网格项背景色 */  
    display: flex;  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */   
  }  
  </style>